<template>
    <div class="wrapper tc-detail"> 
    <div class="fl left-list"> 
     <div class="tc-detail"> 
      <!-- 标题区 --> 
      <div class="detail-tit"> 
       <div class="detail-author"> 
        <a href="javascript:;">{{item.nikename}}</a> 发布 
       </div> 
       <div class="detail-content"> 
        <p v-html="item.content"></p> 
       </div> 
       <div class="detail-tool"> 
        <ul> 
         <li><span class="star"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{item.thumbup}}</span></li> 
         <li><a href="#" data-toggle="modal" data-target="#shareModal"><i class="fa fa-share-alt" aria-hidden="true"></i> {{item.share}}</a></li> 
         <li><a @click="dialogVisible=true;content=''" data-toggle="modal" data-target="#remarkModal"><i class="fa fa-commenting" aria-hidden="true"></i> {{item.comment}}</a></li> 
        </ul> 
       </div> 
      </div> 
      <!-- 评论区 --> 
      <div class="comment-area"> 
       <div class="comment-tit"> 
        <span>评论</span> 
       </div> 
       <ul class="comment-list"> 



        <li v-for="(i,index) in commentlist" :key="index"> 
         <div class="item-photo"> 
          <img src="~/assets/img/widget-widget-photo.png" alt="" /> 
         </div> 
         <div class="item-content"> 
          <p class="author"><a href="javascript:;">{{i.nikename}}</a> 发布</p> 
          <p class="content">{{i.content}}</p> 
         </div> 
         <div class="item-thumb"> 
          <div>
           <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{i.thumbup}}
          </div> 
         </div> </li> 
        
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="fl right-tag"> 
     <div class="block-btn"> 
      <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p> 
      <a class="sui-btn btn-block btn-share" href="./spit-submit.html" target="_blank">发吐槽</a> 
     </div> 
    </div> 
    <div class="clearfix"></div> 


        <!-- -->
        <el-dialog
            title="评论"
            :visible.sync="dialogVisible"
            width="70%">
        <div class="quill-editor" 
            :content="content"
            @change="onEditorChange($event)"
            v-quill:myQuillEditor="editorOption">
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">提 交</el-button>
        </span>
        </el-dialog>



   </div>
</template>
<script>
import '~/assets/css/page-sj-spit-detail.css'

import spitApi from '@/api/spit'
export default {
    data(){
        return {
            dialogVisible:false,
            content: '',
            editorOption: {}
        }
    },
    asyncData({params}){
        
        return spitApi.findById(params.id).then(res=>{
            return spitApi.commentlist(params.id).then(res2=>{
                return {
                    item: res.data.data,
                    commentlist: res2.data.data,
                    pojo : {
                        id: params.id
                    }
                }
            })
        })
    },
    methods: {
      onEditorChange({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      },
      save(){
        spitApi.save({content: this.content,parentid:this.pojo.id}).then(res => {
            //消息提醒
            this.$message({
                message: res.data.message,
                type: (res.data.flag?'success':'error')
            })
            //关闭弹窗
            if(res.data.flag){
                this.dialogVisible=false //关闭弹出窗
                spitApi.commentlist(this.pojo.id).then(res=>{
                    this.commentlist = res.data.data
                })
            }
        })
     }

    }
}
</script>


<style>

.quill-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

</style>

